<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { deleteFriend, queryFriendView } from '../api/friend'
import { useStore } from 'vuex'
import { LoginUser, RemoteUser } from '../utils/IpcData'
import { ElMessage, ElMessageBox } from 'element-plus'

const friendInfo = ref({
  userId: 0,
  nickname: '',
  avatar: ''
})

const props = defineProps({
  friendViewUserId: Number
})

const store = useStore()

const emit = defineEmits(['go-to-chat'])

onMounted(() => {
  queryFriendView(props.friendViewUserId).then((res: any) => {
    friendInfo.value = res.data
  })
})

watch(props, () => {
  queryFriendView(props.friendViewUserId).then((res: any) => {
    friendInfo.value = res.data
  })
})

const chatUser = () => {
  emit('go-to-chat', friendInfo.value.userId)
}

const videoCall = () => {
  window.electron.ipcRenderer.send('create-communication-window', [
    new LoginUser(
      store.getters.getUserId,
      store.getters.getUserNickname,
      store.getters.getUserAvatar
    ),
    new RemoteUser(
      friendInfo.value.userId,
      friendInfo.value.nickname,
      friendInfo.value.avatar,
      true,
      'video'
    )
  ])
  store.commit('SET_CALL_REMOTE_ID', friendInfo.value.userId)
  store.commit('SET_CALL_REMOTE_NICKNAME', friendInfo.value.nickname)
  store.commit('SET_CALL_REMOTE_AVATAR', friendInfo.value.avatar)
  store.commit('SET_CALL_IS_CALLER', true)
}

const voiceCall = () => {
  window.electron.ipcRenderer.send('create-communication-window', [
    new LoginUser(
      store.getters.getUserId,
      store.getters.getUserNickname,
      store.getters.getUserAvatar
    ),
    new RemoteUser(
      friendInfo.value.userId,
      friendInfo.value.nickname,
      friendInfo.value.avatar,
      true,
      'voice'
    )
  ])
  store.commit('SET_CALL_REMOTE_ID', friendInfo.value.userId)
  store.commit('SET_CALL_REMOTE_NICKNAME', friendInfo.value.nickname)
  store.commit('SET_CALL_REMOTE_AVATAR', friendInfo.value.avatar)
  store.commit('SET_CALL_IS_CALLER', true)
}

const handleDeleteUser = () => {
  ElMessageBox.confirm('你确定要删除该好友吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteFriend(store.getters.getUserId, friendInfo.value.userId).then((res) => {
      if (res.code === 200) {
        ElMessage.success(res.msg)
        window.electron.ipcRenderer.send('handle-delete-friend-success')
      }
    })
  })
}
</script>

<template>
  <div class="w-full h-full flex justify-center pt-40">
    <div class="flex flex-col">
      <div class="flex justify-center">
        <img
          :src="friendInfo.avatar"
          alt="Avatar"
          class="w-20 h-20 rounded-full mr-3 object-scale-down border"
        />
      </div>
      <div class="text-xl mt-2 mb-4 font-sans subpixel-antialiased font-semibold">
        {{ friendInfo.nickname }}
      </div>
      <!-- 私聊、语音通话、视频通话 -->
      <div>
        <div
          class="w-20 h-20 bg-green-200 hover:bg-green-100 hover:cursor-pointer inline-block mr-2 rounded-xl"
          @click="chatUser"
        >
          <div class="w-full h-full flex flex-col justify-center items-center gap-1">
            <svg
              viewBox="0 0 1024 1024"
              xmlns="http://www.w3.org/2000/svg"
              class="h-7 w-7 fill-green-400"
            >
              <path
                d="M620.8 819.2l-70.4 89.6c-12.8 19.2-44.8 25.6-64 6.4l-6.4-6.4-70.4-89.6H198.4c-76.8 0-134.4-57.6-134.4-134.4V230.4c0-76.8 57.6-134.4 134.4-134.4h627.2c76.8 0 134.4 57.6 134.4 134.4v454.4c0 76.8-57.6 134.4-134.4 134.4H620.8zM307.2 512c25.6 0 51.2-25.6 51.2-51.2s-25.6-51.2-51.2-51.2-51.2 25.6-51.2 51.2c0 32 25.6 51.2 51.2 51.2z m198.4 0c25.6 0 51.2-25.6 51.2-51.2s-25.6-51.2-51.2-51.2-44.8 25.6-44.8 51.2c0 32 19.2 51.2 44.8 51.2z m204.8 0c25.6 0 51.2-25.6 51.2-51.2s-25.6-51.2-51.2-51.2-51.2 25.6-51.2 51.2c0 32 25.6 51.2 51.2 51.2z"
              ></path>
            </svg>
            私聊
          </div>
        </div>
        <div
          class="w-20 h-20 bg-green-200 hover:bg-green-100 hover:cursor-pointer inline-block mr-2 rounded-xl"
          @click="voiceCall"
        >
          <div class="w-full h-full flex flex-col justify-center items-center gap-1">
            <svg
              viewBox="0 0 1024 1024"
              xmlns="http://www.w3.org/2000/svg"
              class="h-7 w-7 fill-green-400"
            >
              <path
                d="M838.4 569.6c-3.2 9.6-6.4 16-12.8 19.2-6.4 3.2-12.8 6.4-19.2 6.4H800c-9.6-3.2-16-6.4-22.4-12.8-6.4-6.4-6.4-16-3.2-25.6 12.8-67.2 0-137.6-38.4-198.4-38.4-57.6-99.2-99.2-169.6-112-9.6-3.2-16-6.4-22.4-12.8-6.4-6.4-6.4-16-3.2-25.6 3.2-16 16-25.6 32-25.6h6.4c179.2 35.2 294.4 208 259.2 387.2zM694.4 384c35.2 51.2 48 115.2 35.2 176-3.2 9.6-6.4 16-12.8 19.2-6.4 3.2-12.8 6.4-19.2 6.4h-6.4c-16-3.2-28.8-19.2-25.6-38.4 9.6-44.8 0-89.6-25.6-128-25.6-38.4-64-64-108.8-73.6-19.2-3.2-28.8-22.4-25.6-38.4 3.2-16 16-25.6 35.2-25.6h6.4c57.6 12.8 112 48 147.2 102.4z m-73.6 166.4c-3.2 9.6-6.4 16-12.8 19.2-9.6 6.4-16 6.4-22.4 6.4h-6.4c-9.6-3.2-16-6.4-22.4-12.8-6.4-6.4-6.4-16-3.2-25.6 3.2-19.2 0-38.4-9.6-57.6-12.8-16-28.8-28.8-48-32-9.6-3.2-16-6.4-22.4-12.8-6.4-6.4-6.4-16-3.2-25.6 3.2-16 16-25.6 35.2-25.6h6.4c73.6 16 124.8 89.6 108.8 166.4z m-259.2-169.6s-41.6 16-48 19.2c-6.4 3.2-9.6 9.6-9.6 19.2 16 48 41.6 99.2 73.6 147.2 28.8 44.8 67.2 89.6 105.6 121.6 3.2 3.2 6.4 3.2 9.6 3.2 3.2 0 6.4-3.2 9.6-6.4 6.4-6.4 16-19.2 25.6-28.8 19.2-19.2 35.2-25.6 51.2-25.6 3.2 0 9.6 0 12.8 3.2 3.2 0 9.6 3.2 19.2 9.6 3.2 0 41.6 25.6 73.6 57.6 12.8 12.8 32 32 32 54.4 0 16-9.6 32-28.8 48-3.2 3.2-44.8 41.6-108.8 41.6-19.2 0-35.2-3.2-54.4-9.6-19.2-6.4-38.4-16-57.6-25.6-76.8-44.8-134.4-99.2-188.8-182.4-96-140.8-99.2-262.4-96-288 0-105.6 89.6-147.2 99.2-150.4 12.8-6.4 25.6-9.6 38.4-9.6 6.4 0 9.6 0 16 3.2 9.6 3.2 22.4 9.6 32 28.8 12.8 25.6 25.6 64 32 105.6 6.4 41.6-16 54.4-38.4 64z"
              ></path>
            </svg>
            语音通话
          </div>
        </div>
        <div
          class="w-20 h-20 bg-green-200 hover:bg-green-100 hover:cursor-pointer inline-block mr-2 rounded-xl"
          @click="videoCall"
        >
          <div class="w-full h-full flex flex-col justify-center items-center gap-1">
            <svg
              viewBox="0 0 1024 1024"
              xmlns="http://www.w3.org/2000/svg"
              class="h-7 w-7 fill-green-400"
            >
              <path
                d="M151.272727 279.272727A58.228364 58.228364 0 0 0 93.090909 337.454545v372.363637C93.090909 741.911273 119.179636 768 151.272727 768h512c32.093091 0 58.181818-26.088727 58.181818-58.181818v-372.363637c0-32.093091-26.088727-58.181818-58.181818-58.181818h-512zM791.272727 439.389091l106.728728-106.752a46.405818 46.405818 0 0 1 50.734545-10.100364A46.429091 46.429091 0 0 1 977.454545 365.544727v316.183273a46.429091 46.429091 0 0 1-46.592 46.568727c-12.101818 0-23.924364-4.724364-32.86109-13.661091L791.272727 607.906909V709.818182c0 70.562909-57.437091 128-128 128h-512A128.162909 128.162909 0 0 1 23.272727 709.818182v-372.363637C23.272727 266.891636 80.709818 209.454545 151.272727 209.454545h512c70.562909 0 128 57.437091 128 128v101.934546z m14.452364 84.247273l101.934545 101.911272v-203.822545L805.701818 523.636364z"
              ></path>
            </svg>
            视频通话
          </div>
        </div>
        <div
          class="w-20 h-20 bg-red-500 hover:bg-red-400 hover:cursor-pointer inline-block rounded-xl"
          @click="handleDeleteUser"
        >
          <div class="w-full h-full flex flex-col justify-center items-center text-white gap-1">
            <svg
              class="h-7 w-7 fill-white"
              viewBox="0 0 1024 1024"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M92.748283 203.507071h838.503434v44.140606H92.748283zM644.402424 115.238788v44.127677h44.127677V115.238788c0-24.384646-19.75596-44.127677-43.998384-44.127677h-265.050505a43.97899 43.97899 0 0 0-31.172525 12.916364 43.918222 43.918222 0 0 0-12.825859 31.211313v44.127677h44.127677V115.238788h264.791919z m0 0"
              ></path>
              <path
                d="M203.073939 909.614545v-661.979798H158.946263V909.575758c0 24.410505 19.639596 44.179394 44.179394 44.179394h617.761616c24.410505 0 44.179394-19.639596 44.179394-44.179394V247.634747H820.926061v661.979798H203.073939z m0 0"
              ></path>
              <path
                d="M313.412525 335.90303h44.127677V733.090909h-44.127677V335.90303z m176.523637 0h44.127676V733.090909H489.936162V335.90303z m176.523636 0h44.127677V733.090909h-44.127677V335.90303z m0 0"
              ></path>
            </svg>
            删除好友
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
